<template>
    <div class="sliderVertifyPage">
        <div class="drag" ref="dragDiv" :class="{'slideError':sliderState==1}">
            <div class="drag_bg"></div>
            <div class="drag_text processIngTxtLeft" >
                <div class="dragTipInner">
                    <i class="el-icon-check" v-show="sliderState==2"></i>
                    {{confirmWords}}
                </div>
            </div>
            <div class="drag_text processIngTxtRight" >
                <div class="dragTipInner">
                    <i class="el-icon-check" v-show="sliderState==2"></i>
                    {{confirmWords}}
                </div>
            </div>
            <div ref="moveDiv" @mousedown="mouseDownFn"
            :class="{'handler_ok_bg':confirmSuccess}"
            class="handler handler_bg" style="">
            <i class="el-icon-d-arrow-right"></i>
            </div>
            <div v-show="sliderState==1" class="veritiyFail">验证失败</div>
            <!-- <div v-show="sliderState==2" class="veritiySuccess"><i class="el-icon-success"></i></div> -->
        </div>
    </div>
</template>
<script>
export default {
  data: function () {
    return {
      beginClientX: 0, // 距离屏幕左端距离
      mouseMoveState: false, // 触发拖动状态  判断
      maxWidth: "", // 拖动最大宽度，依据滑块宽度算出来的
      confirmWords: "向右滑动验证", // 滑块文字
      confirmSuccess: false, // 验证成功判断
      sliderState: "0" // 滑块的状态 0表示未开始   1表示失败  2表示验证通过
    }
  },
  created () {},
  props: {
  },
  computed: {
  },
  watch: {
  },
  mounted () {
    this.maxWidth = this.$refs.dragDiv.clientWidth - this.$refs.moveDiv.clientWidth
    document.getElementsByTagName("html")[0].addEventListener("mousemove", this.mouseMoveFn)
    document.getElementsByTagName("html")[0].addEventListener("mouseup", this.moseUpFn)
  },
  methods: {
    // mousedown 事件
    mouseDownFn (e) {
      if (!this.confirmSuccess) {
        e.preventDefault && e.preventDefault() // 阻止文字选中等 浏览器默认事件
        this.mouseMoveState = true
        this.beginClientX = e.clientX
      }
    },
    // 验证成功函数
    successFunction () {
      this.confirmSuccess = true
      this.confirmWords = "验证通过"
      if (window.addEventListener) {
        document.getElementsByTagName("html")[0].removeEventListener("mousemove", this.mouseMoveFn)
        document.getElementsByTagName("html")[0].removeEventListener("mouseup", this.moseUpFn)
      } else {
        document.getElementsByTagName("html")[0].removeEventListener("mouseup", () => {})
      }
      document.getElementsByClassName("drag_text")[0].style.color = "#fff"
      document.getElementsByClassName("handler")[0].style.left = this.maxWidth + "px"
      document.getElementsByClassName("drag_bg")[0].style.width = this.maxWidth + "px"
      document.getElementsByClassName("processIngTxtLeft")[0].style.width = this.maxWidth + "px"
      document.getElementsByClassName("processIngTxtRight")[0].style.width = 0 + "px"
      this.sliderState = 2
      this.$emit("vertifySuccess")
    },
    // mousemove事件
    mouseMoveFn (e) {
      if (this.mouseMoveState && !this.confirmSuccess) {
        let width = e.clientX - this.beginClientX
        if (width > 0 && width <= this.maxWidth) {
          document.getElementsByClassName("handler")[0].style.left = width + "px"
          document.getElementsByClassName("drag_bg")[0].style.width = width + "px"
          document.getElementsByClassName("processIngTxtLeft")[0].style.width = width + "px"
          document.getElementsByClassName("processIngTxtRight")[0].style.width = this.maxWidth - width + "px"
        } else if (width > this.maxWidth) {
          this.successFunction()
        }
      }
    },
    // mouseup事件
    moseUpFn (e) {
      this.mouseMoveState = false
      var width = e.clientX - this.beginClientX
      if (width < this.maxWidth && !this.confirmSuccess) {
        document.getElementsByClassName("handler")[0].style.left = 0 + "px"
        document.getElementsByClassName("drag_bg")[0].style.width = 0 + "px"
        document.getElementsByClassName("processIngTxtLeft")[0].style.width = 0 + "px"
        document.getElementsByClassName("processIngTxtRight")[0].style.width = this.maxWidth + "px"
        this.sliderState = 1
      }
    }
  }
}
</script>

<style>
.sliderVertifyPage{
    margin-bottom: 20px;
}
.sliderVertifyPage .drag{
    position: relative;
    background-color: #d6d9db;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
}
.sliderVertifyPage .drag.slideError{
    border: 1px solid #D0021B;
}
.sliderVertifyPage .handler{
    width: 38px;
    height: 38px;
    border-radius: 3px 0px 0px 3px;
    cursor: move;
    position: absolute;
    top: 0px;
}
.sliderVertifyPage .handler_bg{
    background: white;
    display: block;
    text-align: center;
    font-size:16px;
    line-height: 38px;
    color: #dcdfe6;
    /* background: #fff url("") no-repeat center; */
}
.sliderVertifyPage .handler_bg .el-icon-d-arrow-right{
    vertical-align: middle;
}
.sliderVertifyPage .handler_ok_bg{
    border-radius: 0px 3px 3px 0px;
    /* background: #fff url("") no-repeat center; */
}
.sliderVertifyPage .drag_bg{
    background-color: #0CB88E;
    height:38px;
    width: 0px;
    border-radius: 4px 0 0 4px;
}
.sliderVertifyPage .drag_text{
    position: absolute;
    top: 0px;
    font-size: 14px;
    color:#afb3b6;
    width: 100%;
    text-align: center;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -o-user-select:none;
    -ms-user-select:none;
}
.sliderVertifyPage .processIngTxtLeft{
}
.sliderVertifyPage .processIngTxtRight{
    color: white;
}
.sliderVertifyPage .veritiyFail{
    position: absolute;
    left: 0px;
    top: 42px;
    height: 18px;
    line-height: 18px;
    color: #D0021B;
    font-size: 12px;
}
.sliderVertifyPage .veritiySuccess{
    position: absolute;
    right: -40px;
    top:0px;
}
.sliderVertifyPage .veritiySuccess .el-icon-success{
    color: #7CD321;
    font-size: 20px;
    vertical-align: middle;
}
.sliderVertifyPage .dragTipInner{
    width: 348px;
}
.sliderVertifyPage .drag_text{
    overflow: hidden;
    height: 38px;
}

.sliderVertifyPage .processIngTxtLeft{
   left:0px;
   width:0px;
   color: white;
}
.sliderVertifyPage .processIngTxtLeft .dragTipInner{
    position: absolute;
    left: 0px;
}
.sliderVertifyPage .processIngTxtRight{
    right:0px;
    width: 100%;
    color: #afb3b6;
}
.sliderVertifyPage .processIngTxtRight .dragTipInner{
    position: absolute;
    right: 0px;
}
</style>
